<template>
  <div class="login-container">
    <div class="top">
      <!-- 头部 -->
      <van-nav-bar title="登录" left-arrow @click-left="onClickLeft" />  
    </div>
    <!-- 表单 -->
    <van-form>
      <!-- 手机号 -->
      <van-field
        v-model="loginfromdata.mobile"
        label="手机号"
        placeholder="手机号"
        :rules="[
          { required: true, message: '请填写手机号' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' },
        ]"
      />
      <!-- 密码 -->
      <van-field
        v-model="loginfromdata.code"
        type="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <!-- 登录按钮 -->
      <div class="btn">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          @click="$router.push('/layout')"
          >登录</van-button
        >
      </div>
      <!-- 注册新用户 -->
      <div class="enroll" @click="registerFn">
        <span class="new">注册新用户</span>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: "loginview",
  data() {
    return {
      //表单
      loginfromdata: {
        mobile: "13852885661",
        code: "24681",
      },
    };
  },
  methods: {
    //注册进行跳转
    registerFn() {
      this.$router.push("/Register");
    },
    //左侧按钮回退到个人中心
    onClickLeft() {
      this.$router.push("/layout/mine");
    },
  },
};
</script>

<style scoped lang="less">
.van-button--info {
  background-color: #f44336;
  border: #f44336;
}
.btn {
  width: 90%;
  margin: 150px 18px 0 18px;
}
.enroll {
  text-align: right;
  margin-top: 10px;
  margin-right: 10px;
  font-size: 15px;
  .new {
    color: #a6a6a6;
  }
}
</style>
